<template>
  <div class="exam">

    <div class="questions" v-for="(item,index) in questions" :key="index">

      <div class="title">{{++index  }}.（单选）{{item.question}}?</div>
      <div class="quesetion" v-for="(ele,index1) in (item.option)" :key="index1">

        <van-radio-group v-model="radio[index]">
          <van-radio :name="ele.the_option" @click="choose(item,ele.the_option,ele.the_text)">

            {{ele.the_text}}

          </van-radio>
        </van-radio-group>
      </div>

    </div>
    <div class="submitBtn">
      <van-button type="primary" @click="submitQuestions" round>提交</van-button>
    </div>

  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      exam: '',
      questions: [],
      radio: [],
      answer: []
    }
  },
  computed: {

  },
  watch: {

  },
  created () {
    this.UserGetExam()
  },
  mounted () {

  },
  methods: {
    // 普通商品列表
    UserGetExam () {

      this.$axios.get(this.$api.UserGetExam).then((res) => {

        if (res.data.code == 1) {

          this.exam = res.data.data.exam
          this.questions = res.data.data.questions

        }

      })
    },
    //选择答题选项
    choose (item, option, option_text) {
      let { ques_id, question } = item
      let filter = this.answer.filter((ele) => {
        return ele.ques_id != ques_id
      })
      filter.push({
        ques_id, question, option, option_text
      })
      this.answer = filter


    },
    //提交问卷
    submitQuestions () {

      if (this.questions.length == this.answer.length) {
        this.$axios.post(this.$api.UserAnswerQuestions, {
          paper_id: this.exam.paper_id,
          answer: this.answer,
        }).then((res) => {

          if (res.data.code == 1) {

            this.$router.push({ name: 'submitSucess', query: { type: 1 } })

          } else {
            Toast.fail(res.msg);
          }

        })
      } else {
        Toast.fail('您漏选了问题，请检查是否有漏选');
      }
    }
  }
};
</script>
<style lang='less' scoped>
.exam {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.questions {
  width: 343px;
  background: #ffffff;
  border-radius: 6px;
  margin-top: 12px;
  box-sizing: border-box;
  padding: 12px;
  .title {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #202327;
  }
  .quesetion {
    display: flex;
    align-items: center;
    margin-top: 12px;
  }
}
.submitBtn {
  margin-top: 20px;
  button {
    width: 343px;
    height: 43px;
    background: #ff7733;
    border-color: #ff7733;
  }
}
</style>